<template>
  <nav-bar>
    <template v-slot:left>
      <img src="~assets/img/back.png" alt="" @click="backClick">
    </template>
    <template v-slot:center>
      <ul>
        <li v-for="(item, index) in title" :key="index" :class="index === currentIndex ? 'active' : ''" @click="tabClick(index)">{{item}}</li>
      </ul>
    </template>
  </nav-bar>
</template>
<script>
import NavBar from 'components/common/NavBar.vue'
export default {
  components:{
    NavBar
  },
  data(){
    return {
      currentIndex: 0,
      title:['商品','参数','详情','推荐']
    }
  },
  methods:{
    // 返回主页
    backClick(){
      this.$router.go(-1);
    },
    // tab切换
    tabClick(index){
      this.currentIndex = index;
    }
  }
}
</script>
<style lang="less" scoped>
.nav-bar{
  img{
    margin-top: 6px;
    width: 32px;
  }
  ul{
    display: flex;
    li{
      flex: 1;
      font-size: 13px;
    }
    li.active{
      color: pink;
    }
  }
}
</style>